<!-- 对比详情 -->
<template>
  <div class="comparison_page">
    <table @touchstart="touchStart" @touchend="touchEnd">
      <tr ref="up">
        <td class="left">公司名称</td>
        <td v-for="(item, index) in companyName" :key="'type1' + index">{{ item }}</td>
      </tr>
      <tr
        v-for="(item, index) in HonorDepartment"
        :key="'type11' + index"
        v-show="isShowHonorLevel"
      >
        <td ref="left" class="left">{{ item.department }}</td>
        <td v-for="(v, i) in item.values" :key="'type12' + i">{{ v }}</td>
      </tr>
      <tr>
        <td ref="left" class="left">扶持金额</td>
        <td v-for="(item, index) in supportAmount" :key="'type1' + index">{{ item }}万</td>
      </tr>
      <tr v-for="(item, index) in HonorLevelInfo" :key="'type10' + index" v-show="isShowHonorLevel">
        <td ref="left" class="left">{{ item.projectLevel }}</td>
        <td v-for="(v, i) in item.values" :key="'type9' + i">{{ v }}</td>
      </tr>
      <tr>
        <td ref="left" class="left">荣誉</td>
        <td v-for="(item, index) in HonorLevelCount" :key="'type2' + index">{{ item }}</td>
      </tr>
      <!-- 这里是荣誉的数据 -->
      <tr v-for="(item, index) in HonorTypeInfo" :key="'type12' + index" v-show="isShowHonorLevel">
        <td ref="left" class="left">{{ item.projectType }}</td>
        <td v-for="(v, i) in item.values" :key="'type13' + i" v-show="isShowHonorLevel">{{ v }}</td>
      </tr>
      <tr>
        <td ref="left" class="left">知识产权</td>
        <td v-for="(item, index) in PatentCount" :key="'type3' + index">{{ item }}</td>
      </tr>
      <tr v-for="(item, index) in patentInfo" :key="'type4' + index" v-show="isShowHonorLevel">
        <td ref="left" class="left">{{ item.typeDesc }}</td>
        <td v-for="(v, i) in item.values" :key="'type5' + i">{{ v }}</td>
      </tr>
      <tr>
        <td ref="left" class="left">商标</td>
        <td v-for="(item, index) in TrademarkCount" :key="'type6' + index">{{ item }}</td>
      </tr>
      <tr v-for="(item, index) in TrademarkInfo" :key="'type7' + index" v-show="isShowHonorLevel">
        <td ref="left" class="left">{{ item.categoryName }}</td>
        <td v-for="(v, i) in item.values" :key="'type8' + i">{{ v }}</td>
      </tr>
    </table>
    <view class="examineDetail">
      <text v-show="!isShowHonorLevel" @tap="hanledClick">查看详情</text>
      <text @tap="onExport">导出</text>
    </view>
    <view
      :style="{ transform: 'translate3d(' + xMove + 'px,' + yMove + 'px,0)' }"
      class="touch"
      @tap="hanledClick"
      v-show="isShowHonorLevel"
    >{{ isShowHonorLevel ? "收起" : "查看详情" }}</view>
    <!-- 加载中 -->
    <van-overlay :show="showOverlay">
      <van-loading size="24px" vertical type="spinner">加载中...</van-loading>
    </van-overlay>
    <Festival></Festival>
  </div>
</template>

<script>
import { isWeixin, wxShareConfig } from "util/wx.js";
export default {
  components: {},
  data() {
    return {
      patentInfo: [], // 软著列表
      HonorLevelCount: [], // 荣誉级别
      PatentCount: [], // 知识产权计数
      TrademarkCount: [], // 商标计数
      supportAmount: [], // 扶持金额
      TrademarkInfo: [], // 商标信息
      HonorLevelInfo: [], // 扶持金额信息
      HonorDepartment: [], // 共级部数据
      HonorTypeInfo: [], // 荣誉信息
      companyName: [],
      xMove: 0, // 记录原点x轴
      yMove: 0, // 记录原点Y轴
      startPoint: {}, // 记录当前的原点
      xPoint: 0, // 当前x点
      yPoint: 0, // 当前y点
      isShowHonorLevel: false, // 是否展示荣誉级别
      show: false, // 是否显示遮罩层
      showOverlay: true, // 显示加载中
      companyIdList: [], //公司id
      shareCompanyName: "" //微信分享公司名称
    };
  },
  onLoad(e) {
    let token = this.$getToken();
    if (!token) {
      uni.showToast({
        title: "您还没有登录，请登录后操作",
        duration: 2000,
        icon: "none"
      });
      setTimeout(() => {
        uni.setStorageSync("pageUrl", window.location.href);
        uni.navigateTo({
          url: "/pages/login/index"
        });
      }, 2000);
    }
    this.companyIdList = e.companyIdList.split("、");
    this.getCompanyList();
  },
  methods: {
    // 请求数据
    getCompanyList() {
      this.showOverlay = true;
      for (let i = 0; i < this.companyIdList.length; i++) {
        let id = this.companyIdList[i];
        this.$get("/bmj-api/api/cms/cmsCompany/companyContrast?id=" + id).then(
          res => {
            if (res.code == 200) {
              let { result } = res;
              this.HonorLevelCount[i] = result.companyHonorLevelCount; // 荣誉级别
              this.PatentCount[i] = result.companyPatentCount; //知识产权计数
              this.TrademarkCount[i] = result.companyTrademarkCount; //商标计数
              this.supportAmount[i] = result.supportAmount; //扶持金额
              this.companyName[i] = result.companyName; //扶持金额
              this.shareCompanyName = this.companyName.join("、");
              if (isWeixin()) {
                this.initShareConfig();
              }
              this.filterData({
                data: result.companyPatentInfo,
                index: i,
                getData: this.patentInfo,
                keyName: "typeDesc"
              });
              this.filterData({
                data: result.companyTrademarkInfo,
                index: i,
                getData: this.TrademarkInfo,
                keyName: "categoryName"
              }); // 商标信息
              this.filterData({
                data: result.companyHonorLevel,
                index: i,
                getData: this.HonorLevelInfo,
                keyName: "projectLevel"
              }); // 扶持金额
              this.filterData({
                data: result.companyHonorDepartment,
                index: i,
                getData: this.HonorDepartment,
                keyName: "department"
              }); // 共级
              this.filterData({
                data: result.companyHonorType,
                index: i,
                getData: this.HonorTypeInfo,
                keyName: "projectType"
              });
              setTimeout(() => {
                this.showOverlay = false;
              }, 1000);
            } else if (res.code == 10003) {
              uni.showModal({
                title: "提示",
                confirmText: "升级会员",
                cancelText: "考虑一下",
                content: res.message,
                success: function(res) {
                  if (res.confirm) {
                    uni.navigateTo({
                      url: "/pages/VIP/index"
                    });
                  }
                  return;
                }
              });
            }
          }
        );
      }
    },
    // 点击按钮
    hanledClick() {
      this.isShowHonorLevel = !this.isShowHonorLevel;
    },
    // 判断表格数据的长度是否大于 2 且手指向左移动
    // 手指问上滑动
    touchStart(e) {
      this.yPoint = e.changedTouches[0].pageY; // y轴点
      this.xPoint = e.changedTouches[0].pageX; // x轴点
    },
    touchEnd(e) {
      // 上滑(固定公司名称)
      if (this.yPoint > e.changedTouches[0].pageY) {
        // console.log("这是在上滑");
        // this.$refs.up.style.position = "fixed";
        // this.$refs.up.style.top = "20px";
        // this.$refs.up.style.zIndex = "20";
        this.$refs.up.style.backgroundColor = "#fff";
      }
      // 左滑(固定左侧栏)
      if (this.xPoint > e.changedTouches[0].pageX) {
        // this.$refs.left.style.position = "fixed";
        // this.$refs.left.style.left = "0px";
        // this.$refs.left.style.overflowX = "auto";
        // console.log("左滑");
      }
    },
    // 过滤知识产权数据
    filterData(options) {
      let key = options.keyName;
      if (options.data.length) {
        if (!options.getData.length) {
          options.data.forEach(el => {
            let values = {};
            this.companyIdList.forEach((el, ii) => {
              values[ii] = 0;
            });

            options.getData.push({
              [key]: el[key],
              values: values
            });
          });
        } else {
          options.data.forEach((el, a) => {
            let i = options.getData.findIndex(v => v[key] == el[key]);
            if (i == -1) {
              let values = {};
              this.companyIdList.forEach((el, ii) => {
                values[ii] = 0;
              });
              // 未存在
              let obj = {
                [key]: el[key],
                values: values
              };
              options.getData.push(obj);
            }
          });
        }
      } else {
      }
      // 修改对应的值
      options.data.forEach(e => {
        let i = options.getData.findIndex(el => el[key] == e[key]);
        if (i > -1) {
          options.getData[i].values[options.index] = e.total;
        }
      });
    },
    // 微信分享
    initShareConfig() {
      let _this = this;
      let windowurl = window.location.href.split("#")[0];
      uni.request({
        url: "https://oldm.51bmj.cn/WeiXin/GetClientSign", //仅为示例，并非真实接口地址。
        data: {
          rawUrl: windowurl
        },
        dataType: "json",
        header: {
          "X-Requested-With": "XMLHttpRequest"
        },
        method: "GET",
        success: res => {
          if (res.statusCode == 200) {
            let { data } = res;
            let shareInfo = {
              title: _this.shareCompanyName || "企业对比详情",
              desc: "企业荣誉全方位对比，一键导出",
              link: window.location.href
            };
            console.log(99999999, data, shareInfo);
            wxShareConfig(this.$wx, data, shareInfo);
          }
        }
      });
    },
    //
    onExport() {
      uni.showToast({
        title: "您可以在电脑端登录下载源文件",
        duration: 2000,
        icon: "none"
      });
    }
  }
};
</script>
<style lang="less" scoped>
//@import url(); 引入公共css类
table {
  background-color: #fff;
  border: 2rpx solid #ccc;
  margin-top: 0rpx;
  border-right: none;
  text-align: center;
  overflow: auto;
  tr {
    min-height: 70rpx;
    &:first-child {
      border-top: none;
    }
    &:nth-child(2n) {
      min-width: 240rpx;
      td {
        padding: 30rpx;
      }
    }

    td {
      padding: 30rpx;
      min-width: 260rpx;
      border-right: 2rpx solid #ccc;
      border-top: 2rpx solid #ccc;
      &.left {
        position: sticky;
        left: 0;
      }
      &:first-child {
        padding-left: 10rpx;
        width: 190rpx;
        height: 180rpx;
        color: #aaaaaa;
        background-color: #ccc;
      }
      &.active {
        min-width: 240rpx;
      }
      &:nth-child(2n) {
        max-width: 240rpx;
      }
      &:last-child {
        // border-right: none;
      }
    }
  }
}
.touch {
  position: fixed;
  z-index: 999;
  right: 20rpx;
  top: 100rpx;
  width: 200rpx;
  z-index: 9999;
  height: 70rpx;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 10rpx;
  font-size: 30rpx;
  text-align: center;
  color: #fff;
  line-height: 70rpx;
  overflow: hidden;
}
.examineDetail {
  // height: 200rpx;
  display: flex;
  align-items: center;
  justify-content: space-around;
  text {
    padding: 20rpx 40rpx;
    text-align: center;
    width: 200rpx;
    margin: 30rpx 0;
    background-color: #1678ff;
    color: #fff;
    font-size: 28rpx;
    border-radius: 6rpx;
  }
}
</style>
